<template>
  <div class="api-test">
    <h2>API 测试</h2>

    <div class="test-section">
      <h3>批次API测试</h3>
      <button @click="testBatchApi" :disabled="loading">测试批次API</button>
      <div v-if="batchResult" class="result">
        <h4>批次API结果:</h4>
        <pre>{{ JSON.stringify(batchResult, null, 2) }}</pre>
      </div>
    </div>

    <div class="test-section">
      <h3>颜色API测试</h3>
      <button @click="testColorApi" :disabled="loading">测试颜色API</button>
      <div v-if="colorResult" class="result">
        <h4>颜色API结果:</h4>
        <pre>{{ JSON.stringify(colorResult, null, 2) }}</pre>
      </div>
    </div>

    <div class="test-section">
      <h3>款式API测试</h3>
      <button @click="testStyleApi" :disabled="loading">测试款式API</button>
      <div v-if="styleResult" class="result">
        <h4>款式API结果:</h4>
        <pre>{{ JSON.stringify(styleResult, null, 2) }}</pre>
      </div>
    </div>

    <div class="test-section">
      <h3>状态选项API测试</h3>
      <button @click="testStatusOptionsApi" :disabled="loading">测试状态选项API</button>
      <div v-if="statusOptionsResult" class="result">
        <h4>状态选项API结果:</h4>
        <pre>{{ JSON.stringify(statusOptionsResult, null, 2) }}</pre>
      </div>
    </div>

    <div class="test-section">
      <h3>字典API测试</h3>
      <button @click="testDictionaryApi" :disabled="loading">测试字典API</button>
      <div v-if="dictionaryResult" class="result">
        <h4>字典API结果:</h4>
        <pre>{{ JSON.stringify(dictionaryResult, null, 2) }}</pre>
      </div>
    </div>

    <div class="test-section">
      <h3>品牌API测试</h3>
      <button @click="testBrandApi" :disabled="loading">测试品牌API</button>
      <div v-if="brandResult" class="result">
        <h4>品牌API结果:</h4>
        <pre>{{ JSON.stringify(brandResult, null, 2) }}</pre>
      </div>
    </div>

    <div class="test-section">
      <h3>创建批次冲突测试</h3>
      <button @click="testCreateBatchConflict" :disabled="loading">测试创建批次冲突</button>
      <div v-if="conflictResult" class="result">
        <h4>冲突测试结果:</h4>
        <pre>{{ JSON.stringify(conflictResult, null, 2) }}</pre>
      </div>
    </div>

    <div v-if="error" class="error">
      <h4>错误信息:</h4>
      <pre>{{ error }}</pre>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { getBatchById, getBrands, createBatch } from '../api/batchApi'
import { getColors, getStatusOptions } from '../api/colorApi'
import { getStyles } from '../api/styleApi'
import { getAllDictionaries } from '../api'

const loading = ref(false)
const error = ref('')
const batchResult = ref(null)
const colorResult = ref(null)
const styleResult = ref(null)
const statusOptionsResult = ref(null)

const dictionaryResult = ref(null)
const brandResult = ref(null)
const conflictResult = ref(null)

const clearResults = () => {
  batchResult.value = null
  colorResult.value = null
  styleResult.value = null
  statusOptionsResult.value = null

  dictionaryResult.value = null
  brandResult.value = null
  conflictResult.value = null
  error.value = ''
}

const testBatchApi = async () => {
  clearResults()
  loading.value = true
  try {
    // 使用一个测试批次ID
    const result = await getBatchById('batch1')
    batchResult.value = result
    console.log('批次API测试成功:', result)
  } catch (err) {
    error.value = `批次API测试失败: ${err.message}`
    console.error('批次API测试失败:', err)
  } finally {
    loading.value = false
  }
}

const testColorApi = async () => {
  clearResults()
  loading.value = true
  try {
    const result = await getColors({ batchId: 'batch1' })
    colorResult.value = result
    console.log('颜色API测试成功:', result)
  } catch (err) {
    error.value = `颜色API测试失败: ${err.message}`
    console.error('颜色API测试失败:', err)
  } finally {
    loading.value = false
  }
}

const testStyleApi = async () => {
  clearResults()
  loading.value = true
  try {
    const result = await getStyles({ batchId: 'batch1' })
    styleResult.value = result
    console.log('款式API测试成功:', result)
  } catch (err) {
    error.value = `款式API测试失败: ${err.message}`
    console.error('款式API测试失败:', err)
  } finally {
    loading.value = false
  }
}

const testStatusOptionsApi = async () => {
  clearResults()
  loading.value = true
  try {
    const result = await getStatusOptions()
    statusOptionsResult.value = result
    console.log('状态选项API测试成功:', result)
  } catch (err) {
    error.value = `状态选项API测试失败: ${err.message}`
    console.error('状态选项API测试失败:', err)
  } finally {
    loading.value = false
  }
}

const testDictionaryApi = async () => {
  clearResults()
  loading.value = true
  try {
    const result = await getAllDictionaries()
    dictionaryResult.value = result
    console.log('字典API测试成功:', result)
  } catch (err) {
    error.value = `字典API测试失败: ${err.message}`
    console.error('字典API测试失败:', err)
  } finally {
    loading.value = false
  }
}

const testBrandApi = async () => {
  clearResults()
  loading.value = true
  try {
    const result = await getBrands()
    brandResult.value = result
    console.log('品牌API测试成功:', result)
  } catch (err) {
    error.value = `品牌API测试失败: ${err.message}`
    console.error('品牌API测试失败:', err)
  } finally {
    loading.value = false
  }
}

const testCreateBatchConflict = async () => {
  clearResults()
  loading.value = true
  try {
    // 尝试创建一个会冲突的批次
    const conflictBatch = {
      name: 'ZARA-第五批导入',
      brand: 'ZARA',
      season: '第五批导入',
    }

    const result = await createBatch(conflictBatch)
    conflictResult.value = result
    console.log('创建批次成功:', result)
  } catch (err) {
    // 这里应该捕获到冲突错误
    conflictResult.value = {
      error: true,
      message: err.message,
      response: err.response?.data,
      fullError: err,
    }
    console.log('创建批次冲突测试成功:', err.response?.data)

    // 模拟冲突处理逻辑
    if (err.response?.data?.data?.conflict_batch_id) {
      console.log('检测到冲突批次ID:', err.response.data.data.conflict_batch_id)
    }
  } finally {
    loading.value = false
  }
}
</script>

<style scoped>
.api-test {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.test-section {
  margin-bottom: 30px;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 8px;
}

.test-section h3 {
  margin-top: 0;
  color: #333;
}

button {
  background-color: #007bff;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 4px;
  cursor: pointer;
  margin-right: 10px;
}

button:hover {
  background-color: #0056b3;
}

button:disabled {
  background-color: #6c757d;
  cursor: not-allowed;
}

.result {
  margin-top: 15px;
  padding: 15px;
  background-color: #f8f9fa;
  border-radius: 4px;
  border-left: 4px solid #28a745;
}

.result h4 {
  margin-top: 0;
  color: #28a745;
}

.result pre {
  background-color: white;
  padding: 10px;
  border-radius: 4px;
  overflow-x: auto;
  font-size: 12px;
}

.error {
  margin-top: 15px;
  padding: 15px;
  background-color: #f8d7da;
  border-radius: 4px;
  border-left: 4px solid #dc3545;
}

.error h4 {
  margin-top: 0;
  color: #dc3545;
}

.error pre {
  background-color: white;
  padding: 10px;
  border-radius: 4px;
  overflow-x: auto;
  font-size: 12px;
  color: #dc3545;
}
</style>
